<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { addDemand } from '@/api/user'
	
	const loading = ref(false)
	const uForm = ref(null)
	const form = ref({
		demand: undefined
	})
	const rules = ref({
		demand: [
			{required: true, message: '请输入问题描述', trigger: 'blur'}
		]
	})
	
	function submit() {
		uForm.value.validate().then(() => {
			loading.value = true
			addDemand(form.value).then(res => {
				loading.value = false
				uni.navigateTo({url: '/pages/user/demandSuccess'})
			}).catch(() => loading.value = false)
		})
	}
	onLoad(() => {
		
	})
</script>

<template>
	<view class="app-container">
		<uv-form :model="form" :rules="rules" ref="uForm" labelWidth="auto" labelPosition="top">
			<view class="form-box">
				<uv-form-item label="需求描述" prop="demand" required>
					<view class="top-box">
						<uv-textarea v-model="form.demand" placeholder="请填写需求描述" count border="none" height="300"
							:custom-style="{background: '#F8F5F5'}" placeholder-style="color: #808080"></uv-textarea>
					</view>
				</uv-form-item>
			</view>
		</uv-form>
		<view class="app-bottom">
			<uv-button color="linear-gradient( 102deg, #FA3F00 0%, #FF7445 100%)" shape="circle" text="下一步" @click="submit" :disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		padding-bottom: 112rpx;
		.form-box{
			padding: 24rpx;
			background-color: #FFFFFF;
			.top-box{
				margin-top: 14rpx;
			}
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			height: 120rpx;
			padding: 16rpx 24rpx;
			background-color: #FFFFFF;
			border-top: 2rpx solid #D7DBE1;
		}
	}
</style>